import { Button, Input } from "antd";
import { addon } from "pao-aop";
import { reactControl, ReactView, ReactViewControl, ReactViewState } from "pao-aop-client";
import React from "react";
import { setMainFormTitle } from "src/business/util_tool";
import { ROUTE_PATH } from "src/projects/app/util-tool";
import './index.less';
/**
 * 组件：消息互动状态
 */
export interface MessageInteractionViewState extends ReactViewState {
    // 屏幕宽度
    PWidth?: number;
    // 聊天内容
    chatContent?: any;
    // 聊天框输入
    chatIn?: string;
}

/**
 * 组件：消息互动
 * 描述
 */
export class MessageInteractionView extends ReactView<MessageInteractionViewControl, MessageInteractionViewState> {
    constructor(props: any) {
        super(props);
        this.state = {
            PWidth: 0,
            chatContent: [
                {
                    content: '欢迎使用智慧养老！您可以在这里与我们对话，我会帮您解决养老服务问题。',
                    type: 'service',
                }
            ],
            chatIn: '',
        };
    }
    componentDidMount() {
    }
    componentWillMount() {
        this.setState({
            PWidth: document.body.clientWidth - 100,
        });
    }
    sendMsg = () => {
        if (this.state.chatIn) {
            let chat = {
                content: this.state.chatIn,
                type: 'me',
            };
            let { chatContent } = this.state;
            chatContent.push(chat);
            this.setState({
                chatContent,
                chatIn: ''
            });
        }

    }
    msgChange = (e: any) => {
        this.setState({
            chatIn: e.target.value,
        });
    }
    commonProblem = () => {
        this.props.history!.push(ROUTE_PATH.commonProblem);
    }
    render() {
        setMainFormTitle('消息互动');
        return (
            <div>
                <div style={{ height: '200px', position: 'relative' }}>
                    <span
                        style={{
                            position: 'absolute',
                            right: '15px',
                            top: '15px',
                            fontSize: '18px',
                        }}
                        onClick={this.commonProblem}
                    >
                        常见问题
                    </span>
                    <div style={{ height: '150px', textAlign: 'center', background: '#f0f0f0', }}>
                        <span style={{ display: 'inline-block', marginTop: '20px', height: '180px', width: '180px', }}>
                            <img src={require('./people.png')} style={{ height: '100%', width: '100%', borderRadius: '50%' }} />
                        </span>
                    </div>
                </div>
                <div style={{ marginTop: '20px', padding: '10px' }}>

                    {
                        this.state.chatContent.map((value: any, index: number) => {
                            return (
                                <div key={index} style={{ marginBottom: '10px' }}>
                                    <img src={require('./people.png')} style={{ float: value.type === 'service' ? 'left' : 'right', height: '80px', width: '80px', borderRadius: '50%' }} />
                                    <div className='chat' style={{ minHeight: '80px', width: this.state.PWidth + 'px', textAlign: value.type === 'service' ? 'left' : 'right' }}>
                                        <div
                                            style={{
                                                display: 'inline-block',
                                                margin: '10px',
                                                borderRadius: '5px',
                                                padding: '10px',
                                                background: value.type === 'service' ? '#cde6c7' : '#ffffff',
                                                textAlign: 'left',
                                            }}
                                        >
                                            {value.content}
                                        </div>
                                    </div>
                                </div>
                            );
                        })
                    }
                </div>
                <div
                    style={{
                        position: 'fixed',
                        bottom: '0',
                        left: '0',
                        right: '0',
                        height: '50px',
                        borderTop: '1px #f0f0f0 solid'
                    }}
                >
                    <div
                        style={{
                            position: 'absolute',
                            top: '10px',
                            left: '10px',
                            bottom: '7px',
                            right: '80px',
                        }}
                    >
                        <Input value={this.state.chatIn} onChange={this.msgChange} style={{ height: '100%', width: '100%' }} />
                    </div>
                    <div
                        style={{
                            position: 'absolute',
                            top: '10px',
                            bottom: '10px',
                            right: '10px',
                        }}
                    >
                        <Button onClick={this.sendMsg}>发送</Button>
                    </div>
                </div>
            </div>
        );
    }
}

/**
 * 控件：消息互动控制器
 * 描述
 */
@addon('MessageInteractionView', '消息互动', '消息互动')
@reactControl(MessageInteractionView, true)
export class MessageInteractionViewControl extends ReactViewControl {
    constructor() {
        super();
    }
}